<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Beautify FB Options</title>
        <meta http-equiv="Content-Type" content="text/javascript; charset=utf-8" />
        <script type="text/javascript" src="./options/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="./options/jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript" src="./options/farbtastic/farbtastic.js"></script>
        <script type="text/javascript" src="./options_js.js"></script>
        <script type="text/javascript">
			function enablesound() {
				if ($('#audioalert').is(':checked')) {
					$('#soundgong').removeAttr('disabled');
					$('#soundsonar').removeAttr('disabled');
					$('#audioreminder').removeAttr('disabled');
				} else {
					$('#soundgong').attr('disabled', true);
					$('#soundsonar').attr('disabled', true);
					$('#audioreminder').attr('disabled', true);
				} 
			}
			function enablesoundtimer(){
				if($('#audioreminder').is(':checked')) {
					$('#2min').removeAttr('disabled');
					$('#5min').removeAttr('disabled');
					$('#10min').removeAttr('disabled');
					$('#15min').removeAttr('disabled');
				} else {
					$('#2min').attr('disabled', true);
					$('#5min').attr('disabled', true);
					$('#10min').attr('disabled', true);
					$('#15min').attr('disabled', true);
				}
			}
			function playgong(){
				audio = document.getElementById('gongdiv');
				audio.play();
			}
			
			function playsonar(){
				audio = document.getElementById('sonardiv');
				audio.play();
			}
		</script>
        <link rel="stylesheet" href="./options/farbtastic/farbtastic.css" type="text/css" />
        <link rel="stylesheet" href="./options/smoothness/jquery-ui-1.8.4.custom.css" />
		<link rel="stylesheet" href="./options/style.css" />
        <link rel="shortcut icon" type="image/png" href="./icons/icon16.png" />
    </head>
<body>
    <div id="content">
        <span id="saveNotification" class="ui-widget ui-state-highlight ui-corner-all">Your options have been saved. <b>Reloading all Facebook Tabs now.</b></span>
        <span id="resetNotification" class="ui-widget ui-state-error ui-corner-all">Resetting to default options.</span>
    	<ul id="menu">
        	<li><a href="#main_settings">Main Settings</a></li>
        	<li><a href="#style_settings">Style Settings</a></li>
        	<li><a href="#tweaks_enhancements">Tweaks and Enhancements</a></li>
            <li><a href="#version_history">Version History</a></li>
            <li style="float:right;"><button id='resetButton'></button><button id='submitButton'></button></li>
        </ul>
        <div id="main_settings">
        	<div id="main_content">
                <div id="menu_position">
                <fieldset>
                    <legend>Where do you want the Menu?</legend>
                    <div class="option">
                        <strong>
                        	<label><input type="checkbox" id="optlink_account" />Place Options Menu in Account Menu</label>
                        </strong>
                    </div>
                    <div class="option">
                        <strong>
                        	<label><input type="checkbox" id="optlink_main" />Place Options Menu in Main Menu</label>
                        </strong>
                    </div>
                    <div class="option">
                        <strong>
                        	<label><input type="checkbox" id="reload_fb" checked="checked" />Reload Facebook after saving changes</label>
                        </strong>
                    </div>
                </fieldset>
                </div>
                <div id="about_beautify_fb">
                <fieldset>
                    <legend>What is Beautify FB?</legend>
                    <p>
                    	Beautify FB is an Extension for Chromium Based Browsers like Google Chrome, Iron or RockMelt.
                    </p>
                    <p>
                    	It's main purpouse is to make Facebook a bit nicer to look at, and somehow customize the Design by changing the Background colour, adding rounded corners, showing chat emote icons, fixing the menus to allways have them where you need them and add transperency so the background image can unfoald all its beauty.
                    </p>
                    <p>
                    	The original Beautify FB was deleted from the Extension Pages, leaving all users stuck with a unfunctional extension. Thats why I took the initiative, and continued the work. Although I am currently loaded with work, I try my best to keep this extension updated and working for all of its users.
                    </p>
                    <p>
                    	If you have any further Question, or want to submit a feature request, you can do that on the Facebook Page. I hope you enjoy this extension, and stay tuned for future updates.<br /> - Christian
                    </p>
                </fieldset>
                </div>
                <div id="donate">
                <fieldset>
                    <legend>Donate to keep Beautify FB alive</legend>
                    	<div id="paypal">
                            <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                <input type="hidden" name="cmd" value="_s-xclick" />
                                <input type="hidden" name="hosted_button_id" value="9YWPSPUTQMUZY" />
                                <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" />
                                <img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1" />
                            </form>
                    	</div>
                        <div id="paypal_arrow">
                        	<img src="./icons/left-arrow.gif" height="50px" style="float:left" alt="&lt;&lt;&lt;&lt;&lt;&lt;&lt;" />
                            <p>Even the smallest amount will help.</p><div class="c"></div>
                        </div>
				</fieldset>
                </div>
            </div>
            <div id="facebook_feed">
            	<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBeautifyFB&amp;width=405&amp;colorscheme=light&amp;connections=14&amp;stream=true&amp;header=false&amp;height=555" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:405px; height:555px;" allowTransparency="true"></iframe>
            </div>
            <div class="c"></div>
        </div>
        <div id="style_settings">
        	<div class="config">
            	<fieldset>
                	<legend>Background Options</legend>
                        <table width="100%" border="0">
                            <tr>
                                <td><label><input type="radio" name="mainBackgroundType" value="0" />Standard</label></td>
                                <td><label><input type="radio" name="mainBackgroundType" value="1" />Gradient</label></td>
                                <td><label><input type="radio" name="mainBackgroundType" value="2" />Solid</label></td>
                                <td><label><input type="radio" name="mainBackgroundType" value="3" />Image (URL)</label></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input id="mainBackgroundGradientFrom" class="colorwell" type="color" size="7" maxlength="7" value="#" /></td>
                                <td><input id="mainBackgroundSolid" class="colorwell" type="color" size="7" maxlength="7" value="#" /></td>
                                <td><input id="mainBackgroundUrl" style="width:250px;" type="url" value="http://" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input id="mainBackgroundGradientTo" class="colorwell" type="color" size="7" maxlength="7" value="#" /></td>
                                <td></td>
                                <td><label><input type="checkbox" name="bgIMGTiled" id="bgIMGTiled" />Tiled?</label><label><input type="checkbox" name="bgFirstPage" id="bgFirstPage" />On Login Page?</label></td>
                            </tr>
                        </table><br />
				</fieldset>                    
		        <fieldset class="topspace">
                    <legend>Transparency and Position</legend>
                        <div id="style_settings_bars">
                        <h3><a href="#main_content">Main Content</a></h3>
                        <div id="main_content_options_container">
                            <div id="main_content_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input type="checkbox" id="transperentMainContent" />Transparency</label><br />
                                    </p>
                            </fieldset>
                            </div>
                            <div id="main_content_transparency" class="transparency">
                            <fieldset>
                                <legend>Transparency</legend>
                                    <p>
                                       <label for="mainTransparency">Normal &amp; Hover:</label>
                                       <input type="text" id="mainTransparency" style="border:0; color:#C03; font-weight:bold;" />
                                       <input type="hidden" id="contentAreaTransparencyNormal" value="" />
                                       <input type="hidden" id="contentAreaTransparencyHover" value="" />
                                    </p>
                                    <div id="mainTransparency-slider" class="slider"></div>
                                    <div id="main_demo" class="hover_demo">
                                    	<div id="main_demo_test">
                                        	<font color="#000000">- Demo Content Text </font> / <font color="#3B5998"><b> Demo Content Text -</b></font>
                                        </div>
                                    </div>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#menu_bar">Menu Bar</a></h3>
                        <div id="menu_bar_options_container">
                            <div id="menu_bar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="menu_bar_fixed" type="checkbox" />Fixed Position</label>
                                        <label><input id="menu_bar_transparent" type="checkbox" />Transparency</label><br />
                                    </p>
                            </fieldset>
                            </div>
                            <div id="menu_bar_transparency" class="transparency">
                            <fieldset>
                                <legend>Transparency</legend>
                                    <p>
                                       <label for="menuTransparency">Normal &amp; Hover:</label>
                                       <input type="text" id="menuTransparency" style="border:0; color:#C03; font-weight:bold;" />
                                       <input type="hidden" id="barTransparencyNormal" value="" />
                                       <input type="hidden" id="barTransparencyHover" value="" />
                                    </p>
                                    <div id="menuTransparency-slider" class="slider"></div>
                                    <div id="menu_demo" class="hover_demo">
                                    	<div id="menu_demo_test">
                                        	<font color="#000000">- Demo Content Text </font> / <font color="#3B5998"><b> Demo Content Text -</b></font>
                                        </div>
                                    </div>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#left_sidebar">Left Sidebar</a></h3>
                        <div id="left_sidebar_options_container">
                            <div id="left_sidebar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="left_sidebar_fixed" type="checkbox" />Fixed Position</label>
                                        <label><input id="left_sidebar_transparent" type="checkbox" />Transparency</label><br />
                                    </p>
                            </fieldset>
                            </div>
                            <div id="left_sidebar_transparency" class="transparency">
                            <fieldset>
                                <legend>Transparency</legend>
                                    <p>
                                       <label for="leftTransparency">Normal &amp; Hover:</label>
                                       <input type="text" id="leftTransparency" style="border:0; color:#C03; font-weight:bold;" />
                                       <input type="hidden" id="leftTransparencyNormal" value="" />
                                       <input type="hidden" id="leftTransparencyHover" value="" />
                                    </p>
                                    <div id="leftTransparency-slider" class="slider"></div>
                                    <div id="left_demo" class="hover_demo">
                                    	<div id="left_demo_test">
                                        	<font color="#000000">- Demo Content Text </font> / <font color="#3B5998"><b> Demo Content Text -</b></font>
                                        </div>
                                    </div>
                            </fieldset>
                            </div>
                        </div>
                        <h3><a href="#right_sidebar">Right Sidebar</a></h3>
                        <div id="right_sidebar_options_container">
                            <div id="right_sidebar_options" class="options">
                            <fieldset>
                                <legend>Options</legend>
                                    <p>
                                        <label><input id="right_sidebar_fixed" type="checkbox" />Fixed Position</label>
                                        <label><input id="right_sidebar_transparent" type="checkbox" />Transparency</label><br />
                                    </p>
                            </fieldset>
                            </div>
                            <div id="right_sidebar_transparency" class="transparency">
                            <fieldset>
                                <legend>Transparency</legend>
                                    <p>
                                       <label for="rightTransparency">Normal &amp; Hover:</label>
                                       <input type="text" id="rightTransparency" style="border:0; color:#C03; font-weight:bold;" />
                                       <input type="hidden" id="rightTransparencyNormal" value="" />
                                       <input type="hidden" id="rightTransparencyHover" value="" />
                                    </p>
                                    <div id="rightTransparency-slider" class="slider"></div>
                                    <div id="right_demo" class="hover_demo">
                                    	<div id="right_demo_test">
                                        	<font color="#000000">- Demo Content Text </font> / <font color="#3B5998"><b> Demo Content Text -</b></font>
                                        </div>
                                    </div>
                            </fieldset>
                            </div>
                        </div>
                        </div>
                </fieldset>
                <div class="c"></div>
        	</div>
            <div class="help">
            	<fieldset>
                	<legend>Little Helper</legend>
						<div id="picker"></div>
                </fieldset>
            	<fieldset class="topspace">
                	<legend>Message Options</legend>
                        <label><input type="checkbox" id="message_border" value="0" />Show Border</label><br />
                        <label><input type="checkbox" id="message_shadow" value="1" />Show Shadow</label><br />
                        <label><input type="checkbox" id="message_bg" value="2" />Dark Background</label><br />
                </fieldset>
            	<fieldset class="topspace">
                	<legend>Rounded Corners</legend>
                        <label><input type="radio" name="rounded_corners" value="0" />Nothing</label><br />
                        <label><input type="radio" name="rounded_corners" value="1" />Only Container</label><br />
                        <label><input type="radio" name="rounded_corners" value="2" />Container and Messages</label><br />
                        <label><input type="radio" name="rounded_corners" value="3" checked="checked" />Everything Rounded</label><br />
                </fieldset>
            </div>
            <div class="c"></div>
        </div>
        <div id="tweaks_enhancements">
            <fieldset>
                <legend>Audio Notification</legend>
                <label><input type='checkbox' id='audioalert' onclick="enablesound()" />Activate Audio Notification</label><br />
                <p>Sound Type<br />
                <label><input type="radio" id="soundgong" name="audiosound" value="gong" onclick="playgong()"> Gong</label><br />
                <label><input type="radio" id="soundsonar" name="audiosound" value="sonaer" onclick="playsonar()"> Sonar</label><br />
                </p>
                <label><input type='checkbox' id='audioreminder'onclick="enablesoundtimer()" />Activate Audio Notification Reminder</label><br />
                <p>Reminder Time<br />
                <label><input type="radio" id="2min" name="audiotimer" value="120000"> 2 Minutes</label><br />
                <label><input type="radio" id="5min" name="audiotimer" value="300000"> 5 Minutes</label><br />
                <label><input type="radio" id="10min" name="audiotimer" value="600000"> 10 Minutes</label><br />
                <label><input type="radio" id="15min" name="audiotimer" value="900000"> 15 Minutes</label><br />
                </p>
            </fieldset>
            <fieldset>
                <legend>Enhancements</legend>
				<label><input type='checkbox' id='addLogout' />Add Logout to Menu</label><br>
                <label><input type='checkbox' id='keyboardShortcuts' />Keyboard Shortcuts (Shift + h:Home, p:Profile, f:Friends, i:Inbox, s:Edit Account, c:Toggle BuddyList)</label><br />
                <label><input type='checkbox' id='emoticonBar' />Emoticon Bar in every Chatwindow</label><br />
                <label><input type='checkbox' id='faviconAlerts' />Update FavIcon on new Requests and Notifications</label><br />
                <label><input type='checkbox' id='lfdefault' />LiveFeed as Default when clicking on the Facebook Logo</label><br />
                <label><input type='checkbox' id='roboform' />Roboform User? (Moves the ChatBar up 30px)</label><br />
                <label><input type='checkbox' id='roboform' onclick="window.open('https://chrome.google.com/webstore/detail/nonjdcjchghhkdoolnlbekcfllmednbl', '_blank', ''); return false;" />Hover Zoom Picture Previews</label></a>
            </fieldset>
            <fieldset>
                <legend>Hide Sidebar Elements</legend>
                <label><input type='checkbox' id='hideReqbox' />Requests</label><br />
                <label><input type='checkbox' id='hideAdbox' />Advertisments</label><br />
                <label><input type='checkbox' id='hideEventbox' />Events</label><br />
                <label><input type='checkbox' id='hidePokebox' />Pokes</label><br />
                <label><input type='checkbox' id='hideConnectbox' />Connect With Friends</label><br />
                <label><input type='checkbox' id='hideOnlineFriends' />Online Friends (left Sidebar)</label><br />
            </fieldset>
        </div>
        <div id="version_history">
        <p>
            <b>2.0.9</b> <i>(15.08.2011)</i><br /><br />        
   			* Added Audio Notifications<br />
			* Fixed Favicon alerts<br />
            <br /><br /><br />
            <b>2.0.8</b> <i>(26.07.2011)</i><br /><br />
			We are back! The extension has been approved again, and is now back in the Chrome Web Store!<br />
			* Fixed a few problems caused by the new chat<br />
            <br /><br /><br />
            <b>2.0.6.1</b> <i>(16.06.2011)</i><br /><br />
			Due to trademark infringement the Beautify Facebook CR Edit extension has been removed by the Google Team.<br />
			The Extension has now been renamed to "Beautify FB" and will soon have a new Icon (this one is temp.)<br />
            * Fixed the 4 images problem in the gallery's<br />
			* Completely removed the advertisement options<br />
            * other fixes will come soon<br />
            <br /><br /><br />
            <b>2.0.5.5</b> <i>(06.02.2011)</i><br /><br />
			* Fixing a Login Bug<br />
            * Fixing the Menu Bar Transparency<br />
            <br /><br /><br />
            <b>2.0.5.4</b> <i>(27.12.2010)</i><br /><br />
            + Added option to disable Facebook reload after saving changes<br />
            + Added option to disable the background on the Login Page<br />
            + Added option to disable the border around the messages<br />
            + Added option to disable the message shadow<br />
            + Added option to disable the darker background of messages<br />
            * Fixed the hiding of Friendship when "Hide Ads" where enabled<br />
            <br /><br /><br />
            <b>2.0.5.3</b> <i>(24.12.2010)</i><br /><br />
            * Fixed a problem with Game content being cut off<br />
            <br /><br /><br />
            <b>2.0.5.2</b> <i>(24.12.2010)</i><br /><br />
            + Re-Added Easy Logout<br />
            + Re-Added Right Sidebar Fixed Position<br />
            + Re-Designed the complete Options Page<br />
            + Re-Designed Facebook content<br />
            + Added Option to allow/disallow Ads in the Options Page<br />
            + Added ability to enable/disable rounded corners<br />
            + Supporting New Profile<br />
            * Fixed FavIcon Alerts<br />
            * Fixed Facebook Login Page<br />
            * Fixed Hidden Elements<br />
            * Fixed problems caused by fixed left sidebar (Friend in the new Profile/Event Page)<br />
            * Fixed some local storage problems (where your settings are saved)<br />
            <br /><br /><br />
            <b>2.0.4.0</b> <i>(29.11.2010)</i><br /><br />
            + Small fix to the Top Bar
            <br /><br /><br />
            <b>2.0.3.9</b> <i>(19.10.2010)</i><br /><br />
            + Fixed Chat Emote Icon Bar<br />
            + Fixed Facebook Rounder Problems<br />
            + Fixed Background Tile Option<br />
            + Added Option to have Live Feed as Default when klicking on the Facebook Logo<br />
            + Added Option to Move the Chat 30px up (for Roboform Users)<br />
            + Added a Description for the KeyBoard Shortcuts<br />
            <br /><br /><br />
            <b>2.0.3.7</b> <i>(11.08.2010)</i><br /><br />
            + Fixed a small bug with the Color-Wheel<br />
            <br /><br /><br />
        </p>
        </div>
    </div>
    <input type="text" id="version" style="display:none;" />
    <div id="update_notification" title="Update Notification" style="display:none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        	You have just Updated to Version 2.0.9, this is what is new:<br /><br /><br />
			* Added Audio Notifications<br />
			* Fixed Favicon alerts<br />
        </p>
    </div>
    <div id="sounds" style="display:none;">
		<audio id="gongdiv" src="http://beautify.it/gplus/gong.ogg" style="display:none; visibility:hidden;"></audio>
		<audio id="sonardiv" src="http://beautify.it/gplus/sonaer.ogg" style="display:none; visibility:hidden;"></audio>
    </div>
</body>
</html>
